import React, { Component } from 'react'
import { connect } from 'react-redux'
import DmSwitch from './dmSwitch'
import { DmAction, ToastAction } from '../../actions'
import { EventCenter, Type, Data, getSeq, getStamp, GUID } from '../../utils/Global'
import DoLikeComponent from '@com/dm/doLike'
import QuestionEntry from '@com/dm/questionEntry'

class DmFooter extends Component {
  clickSend = () => {
    const { dispatch, value, dmType } = this.props
    const { showToast } = ToastAction
    const { insertDm, setValue, toggleDmType } = DmAction
    let v = value.replace(/^\s+|\s+$/g, '')
    if (v.length > 45) {
      dispatch(showToast('最多输入45个字', 3 * 1000))
      dispatch(setValue(value.slice(0, 150)))
      return
    }
    if (v === undefined || v === '' || v === null) {
      dispatch(showToast('输入不能为空', 3 * 1000))
      dispatch(setValue(''))
      return
    }
    let { local, socket } = dmType === 'common' ? this.getLocalDmMsg(value) : this.getLocalQuestionMsg(value)
    dispatch(insertDm(local))
    dispatch(setValue(''))
    dispatch(toggleDmType('common'))
    EventCenter.emit('send_msg_to_socket', socket)
  }
  getLocalDmMsg(text) {
    let local = {
      type: Type.COMMON_TYPE.COMMON_DM_TEXT,
      data: { text: text, links: [] },
      sender: {
        is_teacher: false,
        nickname: Data.user.nickname,
        headimgurl: Data.user.headimgurl,
        id: Data.user.id
      }
    }
    let socket = {
      type: Type.COMMON_TYPE.COMMON_DM_TEXT,
      data: { text: text, links: [] }
    }
    return { local, socket }
  }
  getLocalQuestionMsg(text) {
    let uuid = GUID.newGUID(30)
    let socket = {
      type: Type.COMMON_TYPE.COMMON_DM_QUESTION,
      data: { data: { text: text, links: [], type: 0 }, uuid }
    }
    let local = {
      type: Type.COMMON_TYPE.COMMON_DM_QUESTION,
      sender: {
        is_teacher: false,
        nickname: Data.user.nickname,
        headimgurl: Data.user.headimgurl,
        id: Data.user.id
      },
      data: {
        question: {
          id: 0,
          data: { type: 0, text: text, links: [] },
          up_num: 0,
          user_id: Data.user.id,
          like: false,
          users: [],
          user: {id: Data.user.id, nickname: Data.user.nickname, name: Data.user.nickname, headimgurl: Data.user.headimgurl},
        },
        question_id: 0,
        uuid
      }
    }
    return { local, socket }
  }
  onChange = () => {
    const { dispatch } = this.props
    const { setValue } = DmAction
    const value = this.input.value
    dispatch(setValue(value))
  }
  handleSubmit = (e) => {
    if (e.keyCode === 13) {
      e.preventDefault()
      this.clickSend()
    }
  }
  clickQuestionIcon = () => {
    const { dmType, dispatch } = this.props
    const { toggleDmType, setValue } = DmAction
    dispatch(toggleDmType(dmType === 'common' ? 'question' : 'common'))
  }
  render() {
    const { value, color_theme, dmType } = this.props
    const _color = color_theme === 'red' ? ' red' : ''
    let questionIcon = require(`@images/question/live_footer${dmType === 'common' ? '_no' : ''}_question_icon.png`)
    let placeholder = dmType === 'common' ? '发点弹幕互动吧…' : '发送提问求解答…'
    return (
      <div className={`dm_footer ${_color}`}>
        <div className="input_con">
          <textarea
            value={value}
            onKeyDown={this.handleSubmit}
            onChange={this.onChange}
            ref={r => this.input = r}
            placeholder={placeholder}
            className="input"
            type="text"
          />
        </div>
        <div className="dm_footer_bottom">
          <DmSwitch />
          <div className="dm_question_action">
            <QuestionEntry/>
            <DoLikeComponent innerType="dm"/>
          </div>
          <div onClick={this.clickQuestionIcon} className={`toggle_question_icon ${dmType === 'common' ? '' : 'active'}`}>
            <img className="question_icon" src={questionIcon} alt=""/>
            发送为提问
          </div>
          <div className="send_btn" onClick={this.clickSend}>发送</div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    value: state.DmState.value,
    dmType: state.DmState.dmType,
    color_theme: state.MainScreenState.info.color_theme
  }
}

export default connect(mapStateToProps)(DmFooter)
